<template>
	<view class="classlist">
		
		<!-- 
			1.已经加载好了数据 - 隐藏
			2. 网络请求后，发现分类本身没有数据 - 隐藏
		-->
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator class="item" :url="'/pages/preview/preview?id='+item._id" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingLayout" v-if="classList.length && noData">
			<uni-load-more :status= "noData ? 'noMore': 'loading'"></uni-load-more>
		</view>
		
		<!--增加底部安全高度 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad, onReachBottom,onShareAppMessage, onShareTimeline} from '@dcloudio/uni-app'
	import {apiGetClassList} from '@/api/api.js'
	
	// 查询参数 - 这里不需要页面渲染，所以不必定义成响应式参数
	const queryParams = {
		pageNum: 1,
		pageSize: 12
	};
	
	// 生命周期：setup 先执行，onLoad 后执行，因此getClassList() 放在
	// onLoad 中调用，否则 queryParams 拿不到 classid 的值
	let pageName;
	onLoad((e) => {
		let {
			id = null,
			name = null
		} = e;
		// 分类id 赋值
		queryParams.classid = id;
		pageName = name;
		// 请求分类列表
		getClassList();
		
		// 设置 navigation bar 的标题
		uni.setNavigationBarTitle({
			title:name
		})
	})
	
	// 触底加载更多
	const noData = ref(false);
	onReachBottom(()=> {
		if(noData.value) return;
		queryParams.pageNum++;
		getClassList();
	})
	
	// 获取分类列表网络数据
	const classList = ref([])
	const getClassList= async ()=>{
		let res = await apiGetClassList(queryParams);
		classList.value = [...classList.value, ...res.data];
		
		// 如果返回列表条数小于分页页面大小，说明已经没有数据了
		if(queryParams.pageNum > res.data.length) {
			noData.value = true;
		}
		
		// 分类列表数据存入本地缓存
		uni.setStorageSync("storageClassList", classList.value);
	}
	
	// 分享给好友
	onShareAppMessage(()=>{
		return {
			title: "俏猪八壁纸-" + pageName,
			path: "pages/classlist/classlist?id="+queryParams.classid+"&name=" + pageName
		}
	})
	
	// 分享到朋友圈
	onShareTimeline(()=>{
		return {
			title: "俏猪八壁纸-" + pageName,
			query: "id=" + queryParams.classid +"&name=" + pageName
			
			// 不设置 imageUrl 时，默认是 logo 图片
			// imageUrl: ""
		}
	})
	
	
</script>

<style lang="scss" scoped>
.classlist {
	.content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5rpx;
		padding: 5rpx;
		.item {
			height: 440rpx;
			// overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		
	}
	
}

</style>
